<template>
  <el-tabs class="group-tabs"
           v-model="active"
           type="card"
           :stretch="false"
           tab-position="top"
           @tab-click="tabClick">
    <el-tab-pane class="group-tab-pane" label="用户属性" name="attr">
      <AttributeList :ref="'attr'" :entry="entry" :hide-keys="hideKeys"/>
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="账号信息" name="auth">
      <UserAuthInfo :ref="'auth'" :entry="entry" />
    </el-tab-pane>
    <el-tab-pane class="group-tab-pane" label="会话" name="sessions">
      <UserSessionList :ref="'sessions'" :entry="entry" />
    </el-tab-pane>
  </el-tabs>
</template>

<script setup lang="ts">
import {currentNames, SERVERS, TYPES} from "@/stores/conf";
import AttributeList from "@/widget/list/AttributeList.vue";

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {ref} from "vue";
import UserAuthInfo from "@/widget/info/UserAuthInfo.vue";
import UserSessionList from "@/widget/list/UserSessionList.vue";

const entry = ref({
  name: currentNames.REALM_USER,
  type: TYPES.REALM_USER,
  server: SERVERS.REALM
});

const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('sessions');

const hideKeys = ref([
  'salt',
]);

defineExpose({
  handleCurrent,
  handleSwitch,
})

</script>

<style scoped>
.el-form-item-class .el-form-item__label {
  font-size: 12px;
}

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}

</style>
